<template>
  <div class="data-edit">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>课程信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="13">
                <el-form-item label="课程名称" prop="courseId">
                  <el-select v-model="ruleForm.courseId" placeholder="请选择" style="width:100%" clearable
                    @change="changeCourse" :disabled="$route.query.action == 'view' || $route.query.action == 'edit'">
                    <el-option v-for="item in ccourseArr" :key="item.id" :label="item.courseName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="13">
                <el-form-item label="课程类型" prop="courseType">
                  <el-select v-model="ruleForm.courseType" placeholder="请选择" style="width:100%" clearable
                    :disabled="true">
                    <el-option v-for="item in courseTypeArr" :key="item.dicCode" :label="item.dicName"
                      :value="item.dicCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="课程模式" prop="courseMode" v-if="ruleForm.courseType === 1">
                  <el-select v-model="ruleForm.courseMode" placeholder="请选择" style="width:100%" clearable
                    :disabled="true">
                    <el-option v-for="item in courseModeArr" :key="item.dicCode" :label="item.dicName"
                      :value="item.dicCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="课程时长" prop="courseTimes" v-if="ruleForm.courseType === 1">
                  <el-input v-model="ruleForm.courseTimes" :disabled="true" type="number">
                    <template slot="append">分钟</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="pay-code" v-if="$route.query.action == 'view' || $route.query.action == 'edit'">
              <img :src="item" v-for="(item, index) in payImgArr" :key="index">
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>购买信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="13">
                <el-form-item label="销售模式" prop="saleMode">
                  <el-select v-model="ruleForm.saleMode" placeholder="请选择" style="width:100%" clearable
                    :disabled="$route.query.action == 'view' || $route.query.action == 'edit'" @change="changeSaleMode">
                    <el-option v-for="item in saleModeArr" :key="item.dicCode" :label="item.dicName"
                      :value="item.dicCode">
                    </el-option>
                  </el-select>

                </el-form-item>
              </el-col>
              <!-- 按次 -->
              <el-col :span="13" v-if="ruleForm.saleMode === 0">
                <el-form-item label="购买数量" prop="buyCount">
                  <el-input v-model="ruleForm.buyCount"
                    :disabled="$route.query.action == 'view' || $route.query.action == 'edit'" type="number">
                    <template slot="append">节</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <!-- 包时 -->
              <el-col :span="13" v-if="ruleForm.saleMode === 1">
                <el-form-item label="购买数量" prop="buyCount">
                  <el-select v-if="ruleForm.courseType == 1" v-model="ruleForm.buyCount" placeholder="请选择"
                    style="width:100%" clearable
                    :disabled="$route.query.action == 'view' || $route.query.action == 'edit'">
                    <el-option v-for="item in buyCountArr" :key="item.dicCode" :label="item.dicName"
                      :value="item.dicCode">
                    </el-option>
                  </el-select>
                  <el-input v-if="ruleForm.courseType == 0" v-model="ruleForm.buyCount" :min="1" type="number">
                    <template slot="append">天</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="13"
                v-if="($route.query.action == 'view' || $route.query.action == 'edit') && ruleForm.saleMode === 0">
                <el-form-item label="剩余数量" prop="remainCount">
                  <el-input v-model="ruleForm.remainCount" :disabled="$route.query.action == 'view'" type="number">
                    <template slot="append">节</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="支付金额" prop="payMoney">
                  <el-input v-model="ruleForm.payMoney"
                    :disabled="$route.query.action == 'view' || $route.query.action == 'edit'" type="number">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 私教课 -->
            <el-row :gutter="20" v-if="ruleForm.courseType === 1">
              <el-col :span="8">
                <el-form-item label="每日约课限制" prop="maxAttendClassOneDay">
                  <el-input v-model="ruleForm.maxAttendClassOneDay" :disabled="$route.query.action == 'view'"
                    type="number">
                    <template slot="append">节</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="允许约课时间" prop="allowAttendClassStartTime">
                  <!-- <el-time-picker
                    :disabled="$route.query.action == 'view'"
                    v-model="ruleForm.allowAttendClassStartTime"
                    value-format="HH:mm"
                    format="HH:mm"
                    placeholder="开始时间">
                  </el-time-picker> -->
                  <el-time-select :disabled="$route.query.action == 'view'" v-model="ruleForm.allowAttendClassStartTime"
                    :picker-options="{
                      start: '00:00',
                      step: '00:30',
                      end: '23:30'
                    }" placeholder="开始时间">
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="" prop="allowAttendClassEndTime">
                  <!-- <el-time-picker
                    :disabled="$route.query.action == 'view'"
                    v-model="ruleForm.allowAttendClassEndTime"
                    value-format="HH:mm"
                    format="HH:mm"
                    placeholder="结束时间">
                  </el-time-picker> -->
                  <el-time-select :disabled="$route.query.action == 'view'" v-model="ruleForm.allowAttendClassEndTime"
                    :picker-options="{
                      start: '00:00',
                      step: '00:30',
                      end: '23:30'
                    }" placeholder="结束时间">
                  </el-time-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 自由练-按次 -->
            <el-row :gutter="20" v-if="ruleForm.courseType === 0 && ruleForm.saleMode === 0">
              <el-col :span="13">
                <el-form-item label="最大门禁容错时间" prop="maxFaultTolerantTime">
                  <el-input v-model="ruleForm.maxFaultTolerantTime" :disabled="$route.query.action == 'view'"
                    type="number">
                    <template slot="append">分钟</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item :label="ruleForm.courseType === 0 && ruleForm.saleMode === 0 ? '课程生效时间' : '课程有效期'"
                  prop="expirationType">
                  <el-select v-model="ruleForm.expirationType" placeholder="请选择" style="width:100%" clearable
                    :disabled="$route.query.action == 'view'">
                    <el-option v-for="item in signCourseExpirationTypeArr" :key="item.dicCode" :label="item.dicName"
                      :value="item.dicCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- 私教课 按次 -->
                <el-form-item label="" prop="expirationDays" label-width="0px" v-if="ruleForm.saleMode === 0">
                  <el-input v-model.trim="ruleForm.expirationDays" :disabled="$route.query.action == 'view'"
                    style="width:89%">
                    <template slot="append">天</template>
                  </el-input>
                </el-form-item>
                <!-- 私教课 包时 -->
                <el-form-item label="" prop="expirationDays" label-width="0px" v-if="ruleForm.saleMode === 1">
                  至包时结束
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="选择成交教练" prop="signCoachUserIdList">
                  <el-select v-model="ruleForm.signCoachUserIdList" filterable multiple placeholder="请选择"
                    style="width:100%" clearable
                    :disabled="$route.query.action == 'view' || $route.query.action == 'edit'">
                    <el-option v-for="item in coachArr" :key="item.id" :label="item.userName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 私教课 -->
            <el-row :gutter="20" v-if="ruleForm.courseType === 1">
              <el-col :span="8" v-if="isMultiple">
                <el-form-item label="选择授课教练" prop="teachCoachUserIdList">
                  <el-select v-model="ruleForm.teachCoachUserIdList" filterable multiple placeholder="请选择"
                    style="width:100%" clearable :disabled="$route.query.action == 'view'">
                    <el-option v-for="item in coachArr" :key="item.id" :label="item.userName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="!isMultiple">
                <el-form-item label="选择授课教练" prop="teachCoachUserIdList">
                  <el-select v-model="ruleForm.teachCoachUserIdList" filterable placeholder="请选择" style="width:100%"
                    clearable :disabled="$route.query.action == 'view'">
                    <el-option v-for="item in coachArr" :key="item.id" :label="item.userName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="选择协议" prop="protocolConfigId">
                  <el-select v-model="ruleForm.protocolConfigId" placeholder="请选择" style="width:100%" clearable
                    :disabled="$route.query.action == 'view' || isDisableProtocol">
                    <el-option v-for="item in protocolArr" :key="item.id" :label="item.protocolName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" v-if="$route.query.action == 'view' && ruleForm.courseType === 1">
              <!-- 私教按次 -->
              <el-col :span="8" v-if="ruleForm.saleMode === 0">
                <el-form-item label="课程单价" prop="unitPrice">
                  <el-input v-model="unitPrice" :disabled="true" type="number">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="课程残值" prop="remainPrice">
                  <el-input v-model="remainPrice" :disabled="true" type="number">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>会员信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-row :gutter="20">
                  <el-col :span="13">
                    <p style="text-indent: 82px;font-weight: bold;margin-bottom: 10px;">会员1</p>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="手机号" prop="memberUserIdList[0].phone">
                      <el-input v-model.trim="ruleForm.memberUserIdList[0].phone"
                        :disabled="$route.query.action == 'view' || $route.query.action == 'edit'"
                        @change="changeMember1"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="姓名" prop="memberUserIdList[0].userName">
                      <el-input v-model.trim="ruleForm.memberUserIdList[0].userName"
                        :disabled="disabled1 || $route.query.action == 'view' || $route.query.action == 'edit'"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="性别" prop="memberUserIdList[0].gender">
                      <!-- <el-input v-model.trim="ruleForm.memberUserIdList[0].gender" :disabled="disabled1"></el-input> -->
                      <el-radio-group v-model="ruleForm.memberUserIdList[0].gender"
                        :disabled="disabled1 || $route.query.action == 'view' || $route.query.action == 'edit'">
                        <el-radio :label="item.dicCode" v-for="(item, index) in genderArr" :key="index">{{ item.dicName
                          }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="身份证号" prop="memberUserIdList[0].idCard">
                      <el-input v-model.trim="ruleForm.memberUserIdList[0].idCard"
                        :disabled="disabled1 || $route.query.action == 'view' || $route.query.action == 'edit'"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="紧急联系人" prop="memberUserIdList[0].emergencyContact">
                      <el-input v-model.trim="ruleForm.memberUserIdList[0].emergencyContact"
                        :disabled="disabled1 || $route.query.action == 'view' || $route.query.action == 'edit'"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="紧急联系人手机号" prop="memberUserIdList[0].emergencyContactPhone">
                      <el-input v-model.trim="ruleForm.memberUserIdList[0].emergencyContactPhone"
                        :disabled="disabled1 || $route.query.action == 'view' || $route.query.action == 'edit'"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="12" v-if="ruleForm.courseMode === 2">
                <el-row :gutter="20">
                  <el-col :span="13">
                    <p style="text-indent: 82px;font-weight: bold;margin-bottom: 10px;">会员2</p>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="手机号" prop="memberUserIdList[1].phone">
                      <el-input v-model.trim="ruleForm.memberUserIdList[1].phone" @change="changeMember2"
                        :disabled="$route.query.action == 'view' || $route.query.action == 'edit'"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="姓名" prop="memberUserIdList[1].userName">
                      <el-input v-model.trim="ruleForm.memberUserIdList[1].userName"
                        :disabled="disabled2 || $route.query.action == 'view' || $route.query.action == 'edit'"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="性别" prop="memberUserIdList[1].gender">
                      <!-- <el-input v-model.trim="ruleForm.memberUserIdList[1].gender" :disabled="disabled2 || $route.query.action == 'view' || $route.query.action == 'edit'"></el-input> -->
                      <el-radio-group v-model="ruleForm.memberUserIdList[1].gender"
                        :disabled="disabled2 || $route.query.action == 'view' || $route.query.action == 'edit'">
                        <el-radio :label="item.dicCode" v-for="(item, index) in genderArr" :key="index">{{ item.dicName
                          }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="身份证号" prop="memberUserIdList[1].idCard">
                      <el-input v-model.trim="ruleForm.memberUserIdList[1].idCard"
                        :disabled="disabled2 || $route.query.action == 'view' || $route.query.action == 'edit'"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="紧急联系人" prop="memberUserIdList[1].emergencyContact">
                      <el-input v-model.trim="ruleForm.memberUserIdList[1].emergencyContact"
                        :disabled="disabled2 || $route.query.action == 'view' || $route.query.action == 'edit'"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="紧急联系人手机号" prop="memberUserIdList[1].emergencyContactPhone">
                      <el-input v-model.trim="ruleForm.memberUserIdList[1].emergencyContactPhone"
                        :disabled="disabled2 || $route.query.action == 'view' || $route.query.action == 'edit'"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card" v-if="$route.query.action == 'view'">
            <div slot="header" class="clearfix">
              <span>课程记录（私教课）</span>
            </div>
            <cvue-table :option="tableOption" :data="tableData" ref="tbl1" :isShowAdd="false" :page="page"
              :tablePage="tablePage" :pageSize="page.pageSize" :loading="tableLoading"
              @current-change="handleCurrentChange" @size-change="handleSizeChange" @select-change="handleSelectChange"
              :isShowPage="false">
              <template slot-scope="scope" slot="classStartTime">
                <span>{{ scope.row.classStartTime + ' - ' + scope.row.classEndTime }}</span>
              </template>
              <template slot-scope="scope" slot="writeOffStatus">
                <span>{{ scope.row.writeOffStatus === 1 ? '已核销' : '未核销' }}</span>
              </template>
              <template slot-scope="scope" slot="writeOffWay">
                <span>{{ setWriteOffWay(scope.row.writeOffWay) }}</span>
              </template>
            </cvue-table>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <div class="edit-footer">
      <el-button @click="confirmDialog" type="primary" :disabled="$route.query.action == 'view'">保存</el-button>
      <el-button @click="closeDialog">取消</el-button>

       <stopRecord :courseDetail="courseDetail"></stopRecord>

    </div>


  </div>
</template>

<script>
/* eslint-disable */
import { mapGetters } from 'vuex'
import cvueTable from '@/components/cvue-table'
import { getClientHeight } from '@/util/tool'
import { validPhone, validIp, validIdCN } from '@/util/validator.js'
import { getPayQr } from '@/api/manageApi'
import stopRecord from './stopRecord.vue'

export default {
  name: 'course-data-edit',
  components: {
    cvueTable, stopRecord
  },
  data() {
    return {
      tablePage: 1,
      tableLoading: false,
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
        pageSizes: [10, 50, 100]
      },
      tableOption: {
        stripe: true,
        width: '100%',
        border: true,
        index: false,
        selected: false,
        cloumn: [
          // { prop: 'index', label: '', align: 'center', width: 58 },
          { prop: 'classStartTime', label: '上课日期', align: 'center', sortable: true, slotStatus: true, width: 280 },
          { prop: 'courseSnapshotName', label: '课程名称', align: 'center', sortable: true },
          { prop: 'coachUserName', label: '教练', align: 'center', sortable: true },
          { prop: 'writeOffStatus', label: '核销状态', align: 'center', sortable: true, slotStatus: true },
          { prop: 'writeOffTime', label: '核销时间', align: 'center', sortable: true },
          { prop: 'writeOffWay', label: '耗课方式', align: 'center', sortable: true, slotStatus: true }
        ]
      },
      tableData: [
        // { name: 'ddd', code: 'sss', order: 1, status: 1 }
      ],
      dialogIndexEdit: false,
      actionType: 'add',
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      ruleForm: {
        courseId: '',
        courseType: '',
        courseMode: '',
        courseTimes: '',
        saleMode: '',
        buyCount: '',
        payMoney: '',
        maxAttendClassOneDay: '',
        maxFaultTolerantTime: '',
        allowAttendClassStartTime: '',
        allowAttendClassEndTime: '',
        expirationType: '',
        expirationDays: '',
        signCoachUserIdList: [],
        teachCoachUserIdList: [],
        protocolConfigId: '',
        memberUserIdList: [
          {
            phone: '',
            userName: '',
            gender: '',
            idCard: '',
            emergencyContact: '',
            emergencyContactPhone: ''
          },
          {
            phone: '',
            userName: '',
            gender: '',
            idCard: '',
            emergencyContact: '',
            emergencyContactPhone: ''
          }
        ]
      },
      rules: {
        courseId: [
          { required: true, message: '请选择课程名称', trigger: 'blur' }
        ],
        saleMode: [
          { required: true, message: '请选择销售模式', trigger: 'blur' }
        ],
        buyCount: [
          { required: true, message: '请输入购买数量', trigger: 'blur' }
        ],
        payMoney: [
          { required: true, message: '请输入支付金额', trigger: 'blur' }
        ],
        maxAttendClassOneDay: [
          { required: true, message: '请输入每日约课限制', trigger: 'blur' }
        ],
        maxFaultTolerantTime: [
          { required: true, message: '请输入门禁最大容错时间', trigger: 'blur' }
        ],
        // allowAttendClassStartTime: [
        //   { required: true, message: '请输入允许约课时间', trigger: 'blur' }
        // ],
        // allowAttendClassEndTime: [
        //   { required: true, message: '请输入允许约课结束时间', trigger: 'blur' }
        // ],
        expirationType: [
          { required: true, message: '请选择课程生效时间', trigger: 'blur' }
        ],
        // signCoachUserIdList: [
        //   { required: true, message: '请选择成交教练', trigger: 'blur' }
        // ],
        teachCoachUserIdList: [
          { required: true, message: '请选择授课教练', trigger: 'blur' }
        ],
        // protocolConfigId: [
        //   { required: true, message: '请选择协议', trigger: 'blur' }
        // ],
        'memberUserIdList[0].phone': [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validPhone, trigger: 'blur' }
        ],
        'memberUserIdList[1].phone': [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validPhone, trigger: 'blur' }
        ]
      },
      disabled: false,
      disabled1: false,
      disabled2: false,
      ccourseArr: [],
      courseModeArr: [],
      courseStateArr: [],
      courseTypeArr: [],
      saleModeArr: [],
      protocolArr: [],
      coachArr: [],
      buyCountArr: [
        { dicName: '30天', dicCode: 30 },
        { dicName: '60天', dicCode: 60 },
        { dicName: '90天', dicCode: 90 },
        { dicName: '120天', dicCode: 120 },
        { dicName: '150天', dicCode: 150 },
        { dicName: '180天', dicCode: 180 },
        { dicName: '210天', dicCode: 210 },
        { dicName: '240天', dicCode: 240 },
        { dicName: '270天', dicCode: 270 },
        { dicName: '300天', dicCode: 300 },
        { dicName: '330天', dicCode: 330 },
        { dicName: '360天', dicCode: 360 },
      ],
      signCourseExpirationTypeArr: [],
      memberData: {},
      genderArr: [],
      isDisableProtocol: false,
      isMultiple: true,
      payImgArr: [],
      unitPrice: '',
      remainPrice: '',
      courseDetail: {}
    }
  },
  computed: {
    height() {
      var height = getClientHeight() - 170
      return height + 'px'
    },
    isDelete() {
      return this.selectIds.indexOf(this.userInfo.id) > -1
    },
    ...mapGetters(['token', 'userInfo'])
  },
  created() {
    // console.log(this.$route)
    this.getDic().then(res => {
      // console.log(res)
      this.dict = res.data
      this.dict.forEach((item, index) => {
        if (item.dicName == 'CourseMode') {
          this.courseModeArr = item.dicValueList
        }
        if (item.dicName == 'CourseState') {
          this.courseStateArr = item.dicValueList
        }
        if (item.dicName == 'CourseType') {
          this.courseTypeArr = item.dicValueList
        }
        if (item.dicName == 'CourseSaleMode') {
          this.saleModeArr = item.dicValueList
        }
        if (item.dicName == 'SignCourseExpirationType') {
          this.signCourseExpirationTypeArr = item.dicValueList
        }
        if (item.dicName == 'Gender') {
          this.genderArr = item.dicValueList
        }
      })
    })
    this.getProtocol()
    this.getCoachList()
    this.getCourseList()
    if (this.$route.query.action == 'edit' || this.$route.query.action == 'view') {
      this.getCourseDetail()
    }
    if (this.$route.query.action == 'view') {
      this.getAppointmentPage()
    }
    this.getPayQrImg()
  },
  methods: {
    getPayQrImg() {
      getPayQr().then(res => {
        this.payImgArr = res.data
      })
    },

    changeSaleMode(val) {
      this.$set(this.ruleForm, 'teachCoachUserIdList', '')
      this.$nextTick(() => {
        if (this.ruleForm.saleMode === 0) {
          this.isMultiple = true
        }
        if (this.ruleForm.saleMode === 1) {
          this.isMultiple = false
        }
      })
    },
    setWriteOffWay(val) {
      if (val === 0) {
        return '后台核销'
      } else if (val === 1) {
        return '会员扫码'
      } else if (val === 2) {
        return '门禁核销'
      } else {
        return ''
      }
    },
    getAppointmentPage() {
      var params = {
        current: 1,
        end: '',
        ext: {},
        key: '',
        orders: [
          {
            order: 'desc',
            sort: 'createTime'
          }
        ],
        signCourseId: this.$route.query.id,
        size: 1000,
        start: '',
        storeId: '',
        appointmentStatusList: [-1, 0, 1]
      }
      this.$store.dispatch('manage/AppointmentPage', params).then(res => {
        // console.log(res)
        if (res.code == '200') {
          var data = res.data.records
          this.tableData = data
        }
      })
    },
    changeCourse(val) {
      // console.log(val)
      this.ccourseArr.forEach((item, index) => {
        if (item.id === val) {
          // console.log(item)
          this.$set(this.ruleForm, 'courseType', item.courseType)
          this.$set(this.ruleForm, 'courseMode', item.courseMode)
          this.$set(this.ruleForm, 'courseTimes', item.courseTimes)
        }
      })
    },
    getCourseDetail() {
      var params = {
        id: this.$route.query.id
      }
      this.$store.dispatch('manage/SignGet', params).then(res => {
        // console.log(res)
        if (res.code == 200) {
          var data = res.data
          this.courseDetail = res.data
          this.$set(this.ruleForm, 'courseId', data.courseSnapshot.courseName)
          this.$set(this.ruleForm, 'courseType', data.courseSnapshot.courseType)
          this.$set(this.ruleForm, 'courseMode', data.courseSnapshot.courseMode)
          this.$set(this.ruleForm, 'courseTimes', data.courseSnapshot.courseTimes)
          this.$set(this.ruleForm, 'saleMode', data.saleMode)
          this.$set(this.ruleForm, 'buyCount', data.buyCount)
          this.$set(this.ruleForm, 'payMoney', (data.payMoney / 100).toFixed(2))
          this.$set(this.ruleForm, 'maxAttendClassOneDay', data.maxAttendClassOneDay)
          this.$set(this.ruleForm, 'maxFaultTolerantTime', data.maxFaultTolerantTime)
          this.$set(this.ruleForm, 'allowAttendClassStartTime', data.allowAttendClassStartTime)
          this.$set(this.ruleForm, 'allowAttendClassEndTime', data.allowAttendClassEndTime)
          this.$set(this.ruleForm, 'expirationType', data.expirationType)
          this.$set(this.ruleForm, 'expirationDays', data.expirationDays)
          var signCoachUsers = []
          if (data.signCoachUsers) {
            data.signCoachUsers.forEach((item, index) => {
              signCoachUsers.push(item.id)
            })
          }
          this.$set(this.ruleForm, 'signCoachUserIdList', signCoachUsers)
          var teachCoachUsers = []
          if (data.teachCoachUsers) {
            data.teachCoachUsers.forEach((item, index) => {
              teachCoachUsers.push(item.id)
            })
          }
          if (data.saleMode == 0) {
            this.isMultiple = true
            this.$set(this.ruleForm, 'teachCoachUserIdList', teachCoachUsers)
          } else {
            this.isMultiple = false
            this.$set(this.ruleForm, 'teachCoachUserIdList', teachCoachUsers[0])
          }

          if (data.protocolConfigSnapshot) {
            this.$set(this.ruleForm, 'protocolConfigId', data.protocolConfigSnapshot.protocolName)
            this.isDisableProtocol = true
          } else {
            this.isDisableProtocol = false
            this.$set(this.ruleForm, 'protocolConfigId', '')
          }

          this.$set(this.ruleForm, 'memberUserIdList', data.userMembers)
          this.$set(this.ruleForm, 'remainCount', data.remainCount)
          // console.log(this.ruleForm.memberUserIdList)
          if (data.buyCount && data.payMoney) {
            this.unitPrice = ((data.payMoney / data.buyCount) / 100).toFixed(2)
          }
          if (data.remainMoney) {
            this.remainPrice = (data.remainMoney / 100).toFixed(2)
          }

        }
      }).catch(err => {
        console.log(err)
      })
    },
    getCoachList() {
      var params = {
        current: 1,
        size: 1000,
        key: ''
      }
      this.$store.dispatch('manage/CoachEnabledGet', '').then(res => {
        if (res.code == '200') {
          var data = res.data
          this.coachArr = data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getProtocol() {
      var params = {
        page: 1,
        limit: 1000
      }
      this.$store.dispatch('manage/ProtocolEnabledGet', '').then(res => {
        // console.log(res)
        if (res.code == '200') {
          var data = res.data
          this.protocolArr = data
        }
      })
    },
    handleResetForm() {
      this.$refs['ruleForm'].resetFields()
    },
    // 改变pagesize
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getAppointmentPage()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.tablePage = val
      this.getAppointmentPage()
    },
    // 表格选择
    handleSelectChange(val) {
      // console.log(val)
      var arr = []
      for (var i = 0; i < val.length; i++) {
        arr.push(val[i].id)
      }
      this.selectIds = arr
      // console.log(this.selectIds)
    },
    // 关闭弹窗
    closeDialog() {
      this.closeTagTo('/home/course-data')
    },
    // 确认
    confirmDialog() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var memberUserIdList = []
          var newMemberUserList = []
          if (this.ruleForm.courseMode === 1 || this.ruleForm.courseType === 0) {
            if (this.ruleForm.memberUserIdList[0].userId != '') {
              memberUserIdList[0] = this.ruleForm.memberUserIdList[0].userId
              newMemberUserList = []
            } else {
              memberUserIdList = []
              newMemberUserList[0] = this.ruleForm.memberUserIdList[0]
            }
          }
          if (this.ruleForm.courseMode === 2) {
            this.ruleForm.memberUserIdList.forEach((item, index) => {
              if (item.userId != '') {
                memberUserIdList.push(item.userId)
              } else {
                newMemberUserList.push(item)
              }
            })
          }
          var params = {
            'id': '',
            'allowAttendClassEndTime': this.ruleForm.allowAttendClassEndTime,
            'allowAttendClassStartTime': this.ruleForm.allowAttendClassStartTime,
            'buyCount': this.ruleForm.buyCount,
            'courseId': this.ruleForm.courseId,
            'expirationDays': this.ruleForm.expirationDays,
            'expirationType': this.ruleForm.expirationType,
            'maxAttendClassOneDay': this.ruleForm.maxAttendClassOneDay,
            'maxFaultTolerantTime': this.ruleForm.maxFaultTolerantTime,
            'memberUserIdList': memberUserIdList,
            'newMemberUserList': newMemberUserList,
            'payMoney': this.ruleForm.payMoney * 100,
            'protocolConfigId': this.ruleForm.protocolConfigId,
            'saleMode': this.ruleForm.saleMode,
            'signCoachUserIdList': this.ruleForm.signCoachUserIdList,
            'teachCoachUserIdList': this.isMultiple ? (this.ruleForm.teachCoachUserIdList ? this.ruleForm.teachCoachUserIdList : []) : [this.ruleForm.teachCoachUserIdList]
          }
          var paramsEdit = {
            "allowAttendClassEndTime": this.ruleForm.allowAttendClassEndTime,
            "allowAttendClassStartTime": this.ruleForm.allowAttendClassStartTime,
            "expirationDays": this.ruleForm.expirationDays,
            "id": this.$route.query.id,
            "maxAttendClassOneDay": this.ruleForm.maxAttendClassOneDay,
            "maxFaultTolerantTime": this.ruleForm.maxFaultTolerantTime,
            "protocolConfigId": this.isDisableProtocol ? '' : this.ruleForm.protocolConfigId,
            "remainCount": this.ruleForm.remainCount,
            "teachCoachUserIdList": this.isMultiple ? (this.ruleForm.teachCoachUserIdList ? this.ruleForm.teachCoachUserIdList : []) : [this.ruleForm.teachCoachUserIdList]
          }
          // console.log(params)
          this.dialogLoading = true
          var url = this.$route.query.action == 'add' ? 'manage/SignAdd' : 'manage/SignEdit'
          var paramsData = this.$route.query.action == 'add' ? params : paramsEdit
          this.$store.dispatch(url, paramsData).then(res => {
            // console.log(res)
            if (res.code == '200') {
              this.$message({
                message: res.msg,
                duration: 2000,
                type: 'success'
              })
              // this.$emit('confirmDialog')
              this.closeTagTo('/home/course-data')
            } else {
              this.$message({ message: res.msg, duration: 2000, type: 'error' })
            }
            this.dialogLoading = false
          }).catch(err => {
            this.$message({ message: err.msg, duration: 2000, type: 'error' })
            this.dialogLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 课程接口
    getCourseList() {
      var params = {
        current: 1,
        size: 1000,
        courseType: '',
        courseState: 1
        // orders: ['order', 'sort']
      }
      this.$store.dispatch('manage/CourseGetList', params).then(res => {
        // console.log(res)
        if (res.code == '200') {
          var data = res.data.records
          this.ccourseArr = data
        }
      })
    },
    changeMember1(val) {
      // console.log(val)
      this.getMember(val, 0)
    },
    changeMember2(val) {
      // console.log(val)
      this.getMember(val, 1)
    },
    getMember(key, index) {
      var params = {
        current: 1,
        size: 100,
        key: key,
        type: ''
      }
      this.$store.dispatch('manage/MemberPageGet', params).then(res => {
        // console.log(res)
        if (res.code == '200') {
          var data = res.data.records
          if (data.length === 1) {
            this.memberData = data[0]
            this.$set(this.ruleForm.memberUserIdList[index], 'userName', this.memberData.userName)
            this.$set(this.ruleForm.memberUserIdList[index], 'gender', this.memberData.gender)
            this.$set(this.ruleForm.memberUserIdList[index], 'idCard', this.memberData.idCard)
            this.$set(this.ruleForm.memberUserIdList[index], 'emergencyContact', this.memberData.emergencyContact)
            this.$set(this.ruleForm.memberUserIdList[index], 'emergencyContactPhone', this.memberData.emergencyContactPhone)
            this.$set(this.ruleForm.memberUserIdList[index], 'userId', this.memberData.userId)
            if (index === 0) {
              this.disabled1 = true
            }
            if (index === 1) {
              this.disabled2 = true
            }
          } else {
            this.memberData = {}
            this.$set(this.ruleForm.memberUserIdList[index], 'userName', '')
            this.$set(this.ruleForm.memberUserIdList[index], 'gender', '')
            this.$set(this.ruleForm.memberUserIdList[index], 'idCard', '')
            this.$set(this.ruleForm.memberUserIdList[index], 'emergencyContact', '')
            this.$set(this.ruleForm.memberUserIdList[index], 'emergencyContactPhone', '')
            this.$set(this.ruleForm.memberUserIdList[index], 'userId', '')
            if (index === 0) {
              this.disabled1 = false
            }
            if (index === 1) {
              this.disabled2 = false
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.data-edit {
  padding: 0px 0 60px !important;
  height: auto !important;
  position: relative;

  .btn-list {
    float: right;
    margin-right: 10px;
    font-size: 12px;
    color: #409EFF;
    cursor: pointer;
  }

  .el-card__header,
  .el-card__body {
    padding: 15px;
  }

  .fix-lh {
    line-height: 32px;
  }

  .el-input.is-disabled .el-input__inner {
    color: #606266;
  }

  .left {
    min-height: 500px;
    background: #fff;
  }

  .left-tree {
    width: 100%;
    min-height: 600px;
    overflow: auto;
  }

  .left-top {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    background: #e2e2e2;
    font-size: 15px;
  }

  .box-card {
    margin-bottom: 10px;
  }

  .avtar-wrap {
    padding: 10px 30px 30px;

    .avtar-item {
      width: 200px;
      margin: 0 auto 50px;

      p {
        line-height: 26px;
        color: #bbb;
      }

      .avtar-img {
        width: 200px;
        height: 200px;
      }

      .avtar-tip {
        color: #555;
      }
    }
  }

  .edit-footer {
    width: calc(100% - 248px);
    height: 60px;
    line-height: 60px;
    position: fixed;
    background: #fff;
    left: 230px;
    bottom: 0;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .pay-code {
    position: absolute;
    right: 30px;
    top: 60px;

    img {
      max-width: 130px;
      margin-right: 50px;
    }
  }
}
</style>
